import { GoToDocsButton } from '../component/GoToDocsButton';

<GoToDocsButton
  href="https://tolgee.io/js-sdk/initialization"
  style={{ float: 'right' }}
/>

To read more about how to use Tolgee on Web without any modern JS framework,
please visit [docs](https://tolgee.io/js-sdk/initialization).

## Add Tolgee libraries to your Web page

You need `@tolgee/web` library to translate your texts:

```html
<script src="https://cdn.jsdelivr.net/npm/@tolgee/web/dist/tolgee-web.umd.min.js"></script>
```

## Setup Tolgee

```javascript
// index.js
const { Tolgee, InContextTools, FormatSimple, BackendFetch } =
  window['@tolgee/web'];

const tolgee = Tolgee()
  .use(InContextTools())
  .use(FormatSimple())
  .use(BackendFetch())
  .init({
    // ############################################################
    // ## you should never leak your API key                     ##
    // ## remove it in for production publicly accessible site   ##
    // ############################################################
    apiKey: '{{{apiKey}}}',
    apiUrl: '{{{apiUrl}}}',
    defaultLanguage: 'en',
    observerType: 'text',
    observerOptions: { inputPrefix: '{{', inputSuffix: '}}' },
  });

tolgee.run();
```

## Do stuff when Tolgee is loaded (optional)

```javascript
tolgee.run().then(() => {
  document.getElementById('loading').style.display = 'none';
});
```

## Use Tolgee

```html
<h1>{{hello_world}}</h1>
```

or

```javascript
tolgee.on('update', () => {
  document.title = tolgee.t('tolgee_example_title', { noWrap: true });
});
```
